<template>
	<view>
		<view v-if="showMap" id="mapContainer" style="width: 100vw;height: 100vh;"></view>
		<view
			style="width: 100%;height: 90upx;position: absolute;top: 0upx;left: 0upx;border-radius: 16upx;box-shadow: 0 0 10upx #aaaaaa;background-color: #FFFFFF;z-index: 100000;"
		>
			<u-dropdown><u-dropdown-item @change="dropChnage" v-model="value1" title="选择打卡区域" :options="positions"></u-dropdown-item></u-dropdown>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showMap:false,
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 34.240981,
			longitude: 108.946938,
			positions: '',
			value1: '',
			options1: [
				{
					label: '默认排序',
					value: 1
				},
				{
					label: '距离优先',
					value: 2
				},
				{
					label: '价格优先',
					value: 3
				}
			],
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/uview/example/template_select.png'
				},
				{
					latitude: 39.9,
					longitude: 116.39,
					iconPath: '../../../static/uview/example/template_select.png'
				}
			],
			polygon: [
				{
					points: [
						{
							latitude: 34.237187,
							longitude: 108.952155
						},

						{
							latitude: 34.245613,
							longitude: 108.952783
						},
						{
							latitude: 34.245174,
							longitude: 108.941962
						},
						{
							latitude: 34.237466,
							longitude: 108.941769
						}
					],
					fillColor: '#691eff', //填充颜色
					strokeColor: '#691eff', //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 10 //层级
				}
			]
		};
	},
	methods: {
		dropChnage(e) {
			let item = this.positions.find(item => {
				return item.ID == e;
			});
			console.log(item);
			this.showMap = false;
			setTimeout(()=>{
				this.showMap = true;
				this.$nextTick(()=>{
					this.initMap({
						center_lat:item.LeftTopLat,
						center_lng:item.LeftTopLon
					})
				})
			},200)
			
		},
		initMap(opt) {
			var center = new TMap.LatLng(opt.center_lat, opt.center_lng); //设置中心点坐标
			//初始化地图
			var map = new TMap.Map('mapContainer', {
				center: center,
				zoom: 16,
				marker: new TMap.MarkerStyle({
					width: 25,
					height: 35,
					anchor: { x: 16, y: 32 },
					src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
				})
			});
		
			//创建并初始化MultiMarker
			var markerLayer = new TMap.MultiMarker({
				map: map, //指定地图容器
				//样式定义
				styles: {
					//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
					myStyle: new TMap.MarkerStyle({
						width: 25, // 点标记样式宽度（像素）
						height: 35, // 点标记样式高度（像素）
		
						//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
						anchor: { x: 16, y: 32 }
					})
				},
				//点标记数据数组
				geometries: [
					{
						id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						styleId: 'myStyle', //指定样式id
						position: new TMap.LatLng(opt.center_lat, opt.center_lng), //点标记坐标位置
						properties: {
							//自定义属性
							title: 'marker1'
						}
					}
				]
			});
			for (let i = 0; i < this.positions.length; i++) {
				let p = this.positions[i];
				console.log(p);
				let path = [
					new TMap.LatLng(p.LeftTopLat, p.LeftTopLon),
					new TMap.LatLng(p.RightTopLat, p.RightTopLon),
					new TMap.LatLng(p.RightBottomLat, p.RightBottomLon),
					new TMap.LatLng(p.LeftBottomLat, p.LeftBottomLon)
				];
				this.initPolygon(map, path, p.ID);
			}
		},
		initPolygon(map, path, id) {
			//初始化polygon
			var polygon = new TMap.MultiPolygon({
				id: 'polygon-layer' + id, //图层id
				map: map, //显示多边形图层的底图
				styles: {
					//多边形的相关样式
					polygon: new TMap.PolygonStyle({
						color: 'rgba(58,150,255,0.5)', //面填充色
						showBorder: false, //是否显示拔起面的边线
						borderColor: '#00FFFF' //边线颜色
					})
				},
				geometries: [
					{
						id: 'polygon' + id, //多边形图形数据的标志信息
						styleId: 'polygon', //样式id
						paths: path, //多边形的位置信息
						properties: {
							//多边形的属性数据
							title: 'polygon'
						}
					}
				]
			});
		}
	},
	onLoad(opt) {
		let center_lat = opt.lat;
		let center_lng = opt.lng;
		let that = this;
		let positions = uni.getStorageSync('signPositions');
		this.showMap = true;
		positions.forEach(item => {
			item.value = item.ID;
			item.label = item.Name;
		});
		this.positions = positions;
		console.log(center_lat, center_lng);
		this.$nextTick(function() {
			that.initMap({
				center_lat,
				center_lng
			});
		});
		
	},
	mounted() {}
};
</script>

<style></style>
